<template>
  <div class="body">
    <!--新闻分类tab栏-->
    <div v-if="this.$route.path==`/news`">
      <mt-navbar class="page-part" v-model="selected">
        <mt-tab-item v-for="(newsCate,index) in newsCate" :id="newsCate._id" @click.native="changeCate">{{newsCate.title}}</mt-tab-item>
      </mt-navbar>
      <!--搜索栏-->
      <div class="news_search">
        <input type="text" v-model="searchWord"/>
        <mt-button type="default" @click.native="getSearch">搜索</mt-button>
      </div>
      <!--新闻列表-->
      <div class="news_content" v-for="(newsListByCate,index) in newsListByCate">
        <router-link :to="`/news/${newsListByCate._id}`">
          <img v-lazy.container="`http://localhost:3000/${newsListByCate.img.filename}`"/>
          <h4>{{newsListByCate.title}}</h4>
          <p v-html="newsListByCate.content"></p>
        </router-link>
        <div><i class="iconfont icon-follow"></i>评论:{{newsListByCate.commentCount}}</div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
  import {mapGetters,mapActions} from 'vuex';
  export default {
    data(){
      return{
        selected:'',
        searchWord:'',
      }
    },
    computed: {
        ...mapGetters(['newsCate','newsListByCate']),
    },
    methods:{
        ...mapActions(['getNewsCate','getNewsListByCate']),
        changeCate(){
            this.getNewsListByCate({categoryId:this.selected});
        },
        getSearch(){
          this.getNewsListByCate({title:this.searchWord});
        }
    },
    created(){
        this.getNewsCate({});
        this.getNewsListByCate({});
    }
  }
</script>
<style>
.body{background:#eee}
.news_content{margin-bottom:20px;background:#fff}
.news_content img{width:100%}
.news_content p,h4{margin:0;}
.news_content h4{font-size:13px;}
.news_content p{height:85px;overflow: hidden;white-space: wrap;text-overflow: ellipsis;font-size:12px;margin:5px 0}
.news_content .contentBot{padding:0 5px;font-size:13px}
.news_content .contentBot i{color:#F40}
.news_content a{color:#333;text-decoration:none}
.news_content div{font-size:12px;}
.news_content div i{color:#f40}
.news_search{overflow:hidden;margin-top:3px;box-sizing:border-box;}
.news_search input{width:85%;float:left;border:1px solid #666;box-sizing:border-box;height:30px;}
.news_search button{float:right;display:inline-block;width:15%;height:30px;text-align:center;box-sizing:border-box;border:1px solid #666;font-size:12px;line-height:30px}
</style>
